<template>
  <div class="echarts-box">
    <div ref="myEchartsRef" :style="{ width: width + 'px', height: height + 'px' }"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
withDefaults(defineProps<{ width: number | string; height: number | string }>(), {
  width: 400,
  height: 400,
});
let myEcharts: echarts.ECharts | undefined;
const option: echarts.EChartsOption = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: 'center',
    right: '5%',
    orient: 'vertical',
    textStyle: {
      color: '#fff',
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
};
const myEchartsRef = ref();
const initChart = () => {
  if (myEchartsRef.value) {
    myEcharts = echarts.init(myEchartsRef.value);
  }
};
const setOptions = (options: echarts.EChartsOption) => {
  if (myEcharts) {
    // console.log("myEcharts:", myEcharts);

    //  option.series = options.series;
    // console.log('data:', option);

    myEcharts.setOption(options);
    // } else {
    //   initChart();
    //   myEcharts?.setOptions({
    //     ...option,
    //     ...options,
    //   });
  }
};
const getOptions = (): echarts.EChartsOption => {
  return option;
};
defineExpose({
  setOptions,
  getOptions,
});
onMounted(() => {
  initChart();
});
onUnmounted(() => {
  myEcharts?.dispose();
});
</script>
<style lang="scss" scoped></style>
